import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Icon, Tooltip, Popover } from 'antd';
import avatorURL from '../../../../../images/profile photo'

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_o6xct5okl18.js',
// });

const content = (
    <div>
        <p>Content</p>
        <p>Content</p>
    </div>
);

class QuestionHeader extends Component {
    handleClick = () => {
        // TODO: 返回文章列表
    }

    render() {
        return (
            <div style={{
                height: 60,
                backgroundColor: '#fff',
                boxShadow: '0 1px 3px rgba(26,26,26,.1)'
            }}>
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between'
                }}>
                    <div>
                        <Tooltip placement="bottom" title="文章列表">
                            <span
                                className="anticon-portal anticonfanhui"
                                style={{
                                    fontSize: 20,
                                    marginLeft: 20,
                                    lineHeight: '60px',
                                    marginRight: 10
                                }}
                                onClick={this.handleClick}
                            ></span>
                        </Tooltip>
                        <span>返回</span>
                    </div>
                    <div style={{
                        lineHeight: '60px',
                        fontSize: 20
                    }}>创建问卷</div>
                    <Popover placement="bottom" content={content} trigger="click">
                        <img src={avatorURL} alt="头像" width={40} height={40} style={{
                            borderRadius: '50%',
                            marginRight: 20,
                            marginTop: 10,
                            cursor: 'pointer'
                        }} />
                    </Popover>
                </div>
            </div>
        )
    }
}

export default withRouter(QuestionHeader);